<template>
	<div>
		<el-tag  class="tar-margin" closable @click="gotoroute()" @close="closeItem()" :type="isActive">{{item.title}}</el-tag>
	</div>
</template>

<script>
	export default {
		name:'NavigationItem',
		props:['index','item'],
		methods:{
			//关闭一个导航窗口..
			closeItem(){
				let close_route =  this.$store.state.navigations[this.index].path
				this.$store.commit('closeone',this.index)
				//当关闭的导航是当前页面，如果还存在历史导航跳转到最后一个导航否则跳转到首页
				if(close_route == this.$route.path){
					if(this.$store.state.navigations.length >0){
						let lastRoute = this.$store.getters.getLastNation
						this.$router.replace(lastRoute.path).catch(err=>{})
					}else{
						this.$router.replace('/admin').catch(err=>{})
					}
				}
			}, 
			//点击跳转到指定的导航..
			gotoroute(){
				this.$router.push(this.item.path).catch(err=>{})
			}
		},
		computed:{
			isActive(){
				return this.$route.path == this.item.path?'':'info'
			}
		}
	}
</script>


<style scoped>
	.tar-margin{
		margin:1px 2px;
	}
	.navigation-item{
		display:flex;
		width:110px;
		height:25px;
		border-radius:5px;
		margin-left:5px;
		background-color: #A9A9A9;
		font-size:14px;
	}
	.active{
		background-color:	#6495ED;
	}
	.show-dot{
		width:12px;
		height:12px;
		border-radius:50%;
		margin-right:3px;
	}
	.navigation-item-left{
		width:80%;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.navigation-item-right{
		width:20%;
		display:flex;
		align-items:center;
		justify-content:center;
	}
</style>